<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>_上架(预包装)</title>
<script type="text/javascript">

  $(function() {
	      $("#txt_sku").focus();
	      clearAll();
  });
   
  function clearAll(){
      $("#txt_sku").val('');
      $("#txt_num").val('');
      $("#txt_weight").val('');
      $("#txt_stockCode").val('');
      $("#txt_boxCode").val('');
  }
 
  function removeMsg(){
      $("#msg").css("color","green");
      $("#msg").html("");
  }
  
  function skuChange(){
	  $("#txt_num").val('');
	  $("#txt_num").focus();
	  removeMsg();
  }
  
  function numChange(){
	  $("#txt_weight").val('');
	  $("#txt_weight").focus();
	  removeMsg();
  }
  
   function weightChange(){
	  $("#txt_stockCode").val('');
	  $("#txt_stockCode").focus();
	  removeMsg();
  }
  
  function stockCodeChange(){
	  $("#txt_boxCode").val('');
	  $("#txt_boxCode").focus();
	  removeMsg();
  }
  
  function boxCodeChange(){
  
      var sku=$("#txt_sku").val().trim();
      var num=$("#txt_num").val().trim();
      var weight=$("#txt_weight").val().trim();
	  var stockCode=$("#txt_stockCode").val().trim();
	  var boxCode=$("#txt_boxCode").val().trim();
	  
	  if(sku.length==0){
		  $("#msg").css("color","red");
		  $("#msg").html("请录入/扫描SKU!");
		  $("#txt_sku").focus();
		  return false;
	  }
	  
	  if(num.length==0 || isNaN(num)){
		  $("#msg").css("color","red");
		  $("#msg").html("请录入商品数量（整数格式）！");
		  $("#txt_num").select();
		  $("#txt_num").focus();
		  return false;
	  }
	  
	  if(weight.length==0 || isNaN(weight)){
		  $("#msg").css("color","red");
		  $("#msg").html("请录入商品重量（整数格式）！");
		  $("#txt_weight").select();
		  $("#txt_weight").focus();
		  return false;
	  }
	  
	  if(num.length==0 || isNaN(num)){
		  $("#msg").css("color","red");
		  $("#msg").html("请录入商品数量（整数格式）！");
		  $("#txt_sku").focus();
		  return false;
	  }
	  
	  if(stockCode.length==0){
		  $("#msg").css("color","red");
		  $("#msg").html("请录入/扫描库位编码!");
		  $("#txt_stockCode").select();
		  $("#txt_stockCode").focus();
		  clearAll();
		  return false;
	  }
	  
	  if(boxCode.length==0){
		  $("#msg").css("color","red");
		  $("#msg").html("请录入/扫描箱编码!");
		  $("#txt_boxCode").focus();
		  clearAll();
		  return false;
	  }
	  
	  var taskCode='${task.taskCode}';
	  
      $.ajax({
			type:'post',
			url:'${ctx}/prepkgUp/ajaxUp',
			data:{
				taskCode:taskCode,
				sku:sku,
				num:num,
				weight:weight,
				stockCode:stockCode,
				boxCode:boxCode,
			},
			dataType:'json',
			success:function(data) {
				var msg=data.msg;
				
			    if( msg=='success_continue' || msg=='success_finish'){
			    
				    $("#msg").css("color","green");
		            $("#msg").html("上架成功.");
		            
		            $("#txt_sku").focus();
		            clearAll();
		            
		            
		            //上架记录
		           var detailList=data.detailList;
                   $("#detailList").html('');
         	       var str='';
			       $.each(detailList,function(i,item){
			    	   str+="<tr>";
			    	   str+="<td>"+item.stockCode+"</td>";
			    	   str+="<td>"+item.boxCode+"</td>";
			    	   str+="<td>"+item.sku+"</td>";
			    	   str+="<td>"+item.num+"</td>";
			    	   str+="<td>"+item.weight+"</td>";
			    	   str+="</tr>";
			        });
			        $("#detailList").html(str);
		            
		            //商品信息
		            var itemList=data.itemList;
                    $("#itemList").html('');
         	        var str_item='';
			        $.each(itemList,function(i,item){
			    	   str_item+="<tr>";
			    	   str_item+="<td>"+item.sku+"</td>";
			    	   str_item+="<td>"+item.num+"</td>";
			    	   str_item+="<td>"+item.upNum+"</td>";
			    	   
			    	   var upStatus=item.status;
			    	   var upStatusStr;
			    	   if(upStatus=='unupped'){
			    	      upStatusStr='<font color=red>未上架</font>';
			    	   }else if(upStatus=='upping'){
			    	      upStatusStr='<font color=blue>上架中...</font>';
			    	   }else if(upStatus=='upped'){
			    	      upStatusStr='<font color=green>已上架</font>';
			    	   }
			    	   str_item+="<td>"+upStatusStr+"</td>";
			    	   
			    	   str_item+="</tr>";
			        });
			       $("#itemList").html(str_item);
			       
			       if(msg=='success_finish'){
			          alert("完成上架！！请按“确定”继续。"); 
				      location.href='${ctx}/prepkgUp/toUpTaskListPage';
			       }
			       
			    }
			    else if(msg=='error_finished'){
			    
			        $("#msg").css("color","red");
		            $("#msg").html("任务已经完成！");
		            
		            $("#txt_sku").focus();
		            clearAll();
			    }
			    else if(msg=='error_sku'){
			    
			        $("#msg").css("color","red");
		            $("#msg").html("sku不属于该任务！");
		            
		            $("#txt_sku").focus();
		            clearAll();
			    }
			    else if(msg=='error_num'){
			    
			        $("#msg").css("color","red");
		            $("#msg").html("商品数量超过！");
		            
		            $("#txt_sku").focus();
		            clearAll();
			    }
			    else{
			        $("#msg").css("color","red");
		            $("#msg").html("验证不成功！");
		            
		            $("#txt_sku").focus();
		            clearAll();
			    }
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
  }
  
</script>
</head>

<body>

	<table id="contentTable" class="table  table-bordered table-condensed">
	    <thead>
			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">扫描上架</th>
		</thead>
		
		
		<tr>
		    <td colspan="4"> 
		       <span style="margin-left: 10px;">SKU编码:</span>
		       <input id="txt_sku" type="text" onchange="skuChange();"  class="input-medium"/>
		       
		       <span style="margin-left: 10px;">商品数量:</span>
		       <input id="txt_num" type="text" onchange="numChange();" class="input-medium"/>
		       
		       <span style="margin-left: 10px;">重量(g):</span>
		       <input id="txt_weight" type="text" onchange="weightChange();"  class="input-medium"/>
		       
		    </td>
		</tr>
		
		<tr>
		    <td colspan="4"> 
		       
		       <span style="margin-left: 10px;">库位编码:</span>
		       <input id="txt_stockCode" type="text" onchange="stockCodeChange();" class="input-medium"/>
		       
		       <span style="margin-left: 10px;">箱子编码:</span>
		       <input id="txt_boxCode" type="text" onchange="boxCodeChange();" class="input-medium"/>
		       
		       <span style="margin-left:12px; margin-top: 10px; color: red; font-weight: bold;" id="msg"></span>
		    
		    </td>
		</tr>
		
		 <thead>
			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">上架信息</th>
		</thead>
		
		<tr>
		    <td>库位</td>
		    <td>箱位</td>
		    <td>SKU</td>
		    <td>数量</td>
		    <td>重量(g)</td>
		</tr>
		
		<tbody name="exist" id="detailList">
		  <c:forEach items="${detailList}" var="t" varStatus="i">
			<tr>
			   <td>${t.stockCode}</td>
			   <td>${t.boxCode}</td>
			   <td>${t.sku}</td>
			   <td>${t.num}</td>
			   <td>${t.weight}</td>
			</tr>
		</c:forEach>
		  
		   
		</tbod>
		
		<tr name="noexist">
		   <td colspan="5" height="50" style="vertical-align:middle; text-align: center;color: gray;font-size: 20px;">无数据</td>
		</tr>
		
	</table>
	
	
	<!-- 商品数据 -->
	<table class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
		<thead>
			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">商品数据</th>
		</thead>
		<thead><tr>
			    <th style="width: 150px;">SKU</th>
			    <th style="width: 150px;">数量</th>
			    <th style="width: 150px;">已上架数量</th>
			    <th>上架状态</th>
			</tr></thead>
		<tbody id="itemList">
		<c:forEach items="${itemList}" var="t" varStatus="i">
			<tr>
			   <td>${t.sku}</td>
			   <td>${t.num}</td>
			   <td>${t.upNum}</td>
			   <td>
			       <c:if test="${t.status eq 'unupped'}"> <font color=red>未上架           </font></c:if>
			       <c:if test="${t.status eq 'upping'}"><font color=blue>上架中...</font></c:if>
			       <c:if test="${t.status eq 'upped'}">   <font color=green>已上架      </font></c:if>
			   </td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	
</body>
</html>
